var that
class Tab {
    constructor(id) {
        that = this
        this.tab = document.querySelector(id)
        this.ul = document.querySelector('.fisrstnav ul')
        this.tabscon = document.querySelector('.tabscon')
        this.add = document.querySelector('.tabadd')
        this.init()
    }
    //初始化，用于注册事件
    init() {
        that.toObtain()
        //给+号添加点击事件
        this.add.onclick = this.addTab;
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab
            this.remove[i].onclick = this.removeTab
            this.span[i].ondblclick = this.editTab
            this.sections[i].ondblclick = this.editTab
        }
    }
    //切换功能
    toggleTab() {
        that.cleaRClass()
        //console.log(this.index);
        //需要给点击的li添加'liactive'类名
        this.className = 'liactive'
        //让对应的sections显示出来
        that.sections[this.index].className = 'conactive'
        //让其他的sections隐藏
    }
    cleaRClass() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
    toObtain() {
        this.lis = document.querySelectorAll('ul li')
        this.sections = document.querySelectorAll('section')
        //1.获取删除按钮
        this.remove = document.querySelectorAll('.icon-guanbi');
        this.span = document.querySelectorAll('li span:first-child')
        // console.log(this.sections.length);
    }

    //添加功能
    addTab() {
        that.cleaRClass()
        //3.创建li标签，追加到ul里面去
        var li = `<li class="liactive"><span>新卡</span><span class="iconfont icon-guanbi"></span></li>`
        that.ul.insertAdjacentHTML('beforeend', li)
        //4.创建section 追加到父元素里面
        var section = `<section class="conactive">测试${Math.random()}</section>`
        that.tabscon.insertAdjacentHTML('beforeend', section)
        that.init()
    }

    //删除功能
    removeTab(e) {
        //阻止冒泡行为
        e.stopPropagation()
        var index = this.parentNode.index
        //console.log(index);
        that.lis[index].remove()
        that.sections[index].remove()
        that.init()
        if (document.querySelector('.liactive')) return
        that.lis[index] && that.lis[index++].click()
        index--
        that.lis[index] && that.lis[index].click()
        
    }

    //修改功能
    editTab() {
         // window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        //1.给li添加双击事件
        //2.找到li标签里面的第一个span标签
        var value = this.innerHTML
        //3.需要在这个span标签里面放置一个input标签，将刚才获取到的内容添加到input里面去
        this.innerHTML = `<input type="text" value="${value}">`
        //获取input标签
        var input = this.children[0];
        input.ondblclick = function (e) {
            e.stopPropagation()
          }
        //文字选中
        input.select();
        //失去焦点时，获取input标签里面的value 给input的爸爸 span
        input.onblur = function () {
            //这里的this指的是input  parentNode指的是span
            this.parentNode.innerHTML = this.value
        }
        //当input按下回车键时，获取input里面的value，给它的爸爸 span
        input.onkeyup = function (e) {
            if (e.keyCode === 13)
                //手动调用失去焦点事件
                this.blur()

        }

     }

}
new Tab('#tab')